<template>
	<view class="nav">
		<text @click="select(0)" :class="selected[0]==1?'active':''">我的</text>
		<text @click="select(1)" :class="selected[1]==1?'active':''">次卡</text>
		<text @click="select(2)" :class="selected[2]==1?'active':''">储值</text>
		<text @click="select(3)" :class="selected[3]==1?'active':''">期限</text>
	</view>
	<view class="content"  >
		<view class="card" v-for="v in cards" :key="v.id" :style="bgColor[v.ex]" @click="goto" :data-v="v.id">
			<view class="hcard">
				<text>{{v.title}}</text>
				<text>{{v.type}}</text>
			</view>
			
			<view class="mcard">
				<view>
					<text>支持场馆:</text><text>{{v.place}}</text>
				</view>
				<view>
					<text>使用期限:</text><text>{{v.date}}</text>
				</view>
				<view >
					<text>使用次数:</text><text>{{v.times}}</text>
				</view>
			</view>
			<view class="fcard">
				<text>售价:</text><text>￥{{v.price}}</text><text>￥{{v.oprice}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { reactive, toRefs,onMounted } from 'vue';
	import myRequest from '../../utils/myRequest.js';
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import store from '../../store/index.js'
	export default {
		setup(){
			let data=reactive({
				cards:[],
				list:[],
				selected:[1,0,0],
				bgColor:['background:linear-gradient(to right,#6A31FD,#00CFFF)',
				        'background:linear-gradient(to right,#E21D1F,#D79797)',
						'background:linear-gradient(to right,#00CFCF,#949494)',],
				goto(e) {
					this.cards.forEach(v=>{
						if(v.id==e.currentTarget.dataset.v){
							store.commit('getCardNow',v)
						}
					})
					// console.log(...mapState(['CardNow']))
					// ...mapState(['CardNow']),
					uni.navigateTo({
						url:'/pages/Client/ClientPages'
						})
				},
				select(e){
					for(let i=0;i<this.selected.length;i++){
						this.selected[i]=0;
					}
					this.selected[e]=1;
						this.cards=[];
						if(e==1){
							this.list.forEach(v=>{
								if(v.type=='次卡类型'){
									this.cards.push(v);
								}
							})
						}
						if(e==2){
							this.list.forEach(v=>{
								if(v.type=='储值类型'){
									this.cards.push(v);
								}
							})
						}
						if(e==3){
							this.list.forEach(v=>{
								if(v.type=='期限类型'){
									this.cards.push(v);
								}
							})
						}
					if(e==0){
						this.cards=this.list
					}
					
				},
				getData(){
					myRequest({
						url:'/getcards',
						data:{
							vipId:store.state.userdata[0].vipId
						}
					}).then((res)=>{
						data.cards=res.data.data;
						data.list=res.data.data;
					})
				},
			});
			onMounted(()=>{
				// console.log(store.state.userdata[0])
				data.getData()
			})
			onLoad((e)=>{
				// console.log(e)
			})
			return { ...toRefs(data) };
		}
	}
</script>

<style lang="scss">
.active{
	border-bottom: 2px solid #6A31FD;
}
.nav{
	font-size: 26rpx;
	width:750rpx;
	padding-top:20rpx;
	padding-bottom:10rpx;
	display: flex;
	justify-content: space-around;
	text{
		font-weight: 700;
		width: 100rpx;
		height:50rpx;
		line-height: 50rpx;
		text-align: center;
		
	}
}
.content{
	background-color: rgb(242,242,242);
	padding: 25rpx;
	text{
		height: 50rpx;
		line-height: 50rpx;
		color: white;
	}
	.card{
		font-size: 24rpx;
		padding: 15rpx;
		margin-bottom: 25rpx;
		border-radius: 15rpx;
		background: linear-gradient(to right, red,yellow);
		.hcard{
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
		}
		
		.fcard{
			text:nth-of-type(2){
				font-size: 28rpx;
			}
			text:last-child{
				margin-left: 10rpx;
				text-decoration: line-through;
			}
		}
	}
}
</style>
